<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app">
      <div class="input_userInfo">
        <h3>学生信息填报表</h3>
        <div class="input_container">
          <div class="item">姓名：<input type="text" v-model="inputInfo.name" /></div>
          <div class="item">性别：<input type="text" v-model="inputInfo.gender" /></div>
          <div class="item">年龄：<input type="number" v-model="inputInfo.age" /></div>
          <div class="item">语文：<input type="number" v-model="inputInfo.yuwen" /></div>
          <div class="item">数学：<input type="number" v-model="inputInfo.math" /></div>
          <div class="item">英语：<input type="number" v-model="inputInfo.english" /></div>
          <div class="btn" @click="sumbit">提交</div>
        </div>
      </div>
      <div class="card" v-for="(item,index) in userInfo" :key="index">
        <div class="content">
          <div class="avter">
            <img :src="item.srcImg" alt="" />
          </div>
          <span>姓名：{{item.name}}</span>
          <span>年龄：{{item.age}}</span>
          <span>性别：{{item.gender}}</span>
          <span>总分：{{item.yuwen + item.math + item.english}}</span>
        </div>
        <div @click="toogle(index)" class="shangla" v-if="item.yuwen<60 | item.math<60 | item.english<60 ? false:true">---</div>
        <div class="detailPage" v-show="item.show">
          <div @click="toogle(index)" class="detailBtn">---</div>
          <span>语文：{{item.yuwen}}</span>
          <span>数学：{{item.math}}</span>
          <span>英语：{{item.english}}</span>
        </div>
      </div>
    </div>
  </body>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          inputInfo: { name: '', age: 0, gender: '', srcImg: './img/1.jpg', yuwen: 0, math: 0, english: 0, show: false },
          userInfo: [
            { name: '张三', age: 20, gender: '男', srcImg: './img/1.jpg', yuwen: 80, math: 80, english: 80, show: false },
            { name: '李四', age: 20, gender: '男', srcImg: './img/2.jpg', yuwen: 80, math: 50, english: 80, show: false },
            { name: '王五', age: 20, gender: '男', srcImg: './img/3.jpg', yuwen: 80, math: 100, english: 80, show: false }
          ]
        }
      },
      methods: {
        toogle(index) {
          this.userInfo[index].show = !this.userInfo[index].show
          // console.log(this.userInfo.yuwen)
        },
        sumbit() {
          if ((this.inputInfo.name === '') | (!this.inputInfo.gender === '')) {
            alert('请填写完整！')
            return
          }
          this.userInfo.push(this.inputInfo)
          // console.log(this.userInfo)
          return (this.inputInfo = { name: '', age: 0, gender: '', srcImg: './img/1.jpg', yuwen: 0, math: 0, english: 0, show: false })
        }
      }
    }).mount('#app')
  </script>
</html>
